<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Code</title>
  <link rel="stylesheet" href="./style/index.css">
</head>

<body>
  <div id="app">
    <div class="content-layout">
      <div>
        <span>
          {{message}}
        </span>
      </div>
      <div>
        <span>
          {{longxiaobai}}
        </span>
      </div>
    </div>
    <div class="components-layout">
      <counter></counter>
    </div>
    <div class="data-views">
      <div class="view-item" v-for="(person, index) in dataViews" :key="index">
        <span>{{person.name}} - {{person.country}}</span>
      </div>
    </div>
    <div class="list-view">
      <div>
        <h3>简版列表优化之虚拟列表实现</h3>
      </div>
      <div class="context-wrraper" ref="contextWrraper">
        <div class="list-scroller" :style="{ height: heightClient }">
          <div class="items-view" ref="itemsView" :style="{ transform: 'translateY(' + scrollTop + 'px)' }">
            <div class="item-line" v-for="(item, index) in listAcceptState" :key="index">
              <span>{{item.indexCurrent}} - {{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/Faker/3.1.0/faker.min.js"></script>
  <script src="../../dist/vue.js"></script>
  <script src="./components/counter.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      components: {
        counter: counter,
      },
      data: {
        message: 'This is a Example',
        worker: {
          name: 'longxiaobai',
          age: 28,
          jober: 'coder'
        },
        dataViews: [
          {
            name: '宇文夏州',
            country: '北魏',
            hotWar: '邙山之战'
          },
          {
            name: '秦王',
            country: '隋',
            hotWar: '虎牢关'
          },
          {
            name: '宇文邕',
            country: '西魏',
            hotWar: '晋阳之战'
          },
        ],
        startIndex: 0,
        scrollTop: 0,
        stateTotal: 1000,
        listVirtualState: []
      },
      computed: {
        longxiaobai() {
          return `${this.worker.name} : ${this.worker.age}`
        },
        listAcceptState() {
          return this.listVirtualState.slice(this.startIndex, this.startIndex + 10);
        },
        heightClient() {
          return this.stateTotal * 30 + 'px';
        }
      },
      methods: {
        tracker() {
          console.log(this.message);
          let isTrue = this.worker === this._data.worker;
          console.log('worker === _data.worker:', isTrue);
        },
        trackScroll() {
          this.$refs.contextWrraper.addEventListener('scroll', (e) => {
            const top = e.target.scrollTop;
            this.scrollTop = top;
            this.startIndex = Math.round(top / 30);
            // console.log('startIndex', this.startIndex);
          })
        },
        dataCreate() {
          for (let index = 0; index < this.stateTotal; index++) {
            this.listVirtualState.push({
              indexCurrent: index,
              name: faker.name.findName(),
              email: faker.internet.email(),
              url: faker.internet.url(),
            })
          }
        }
      },
      mounted() {
        this.tracker();
        setTimeout(() => {
          this.dataViews
            .copyWithin(2, 0, 1);
          console.log(this.dataViews);
        }, 4500);
        this.dataCreate();
        this.trackScroll();
      }
    })
  </script>
</body>

</html>